<template>
	<view class="style-title">生成风格</view>
	<scroll-view class="scroll-viwe_H" scroll-with-animation scroll-x>
		<view class="style-content"  v-for="(item,index) in styleList" :key="index" 
		:class = "{'select-style':selectIndex===index}">
			<view class="style-list" @click="selectIndex=index">
				<image :src="item.icon" mode="aspectFill"></image>
				<text :style="{'backgroundColor':item.color}">{{item.title}}</text>
			</view>
		</view>
	</scroll-view>
	<view class="keyword-title">画面关键词</view>
	<view class="textarea-view">
		<textarea 
		placeholder="请输入中文描述.比如:画一位女子,身穿汉服,手拿佩剑"
		:show-confirm-bar="false"
		class="textarea-style"
		v-model="content"/>
	</view>
	<!-- 生成效果 -->
	<block v-for="(item,index) in store.messages" :key="index">
		<view class="creative-tips">{{item.prompt}}</view>
		<view class="creative-image" v-if="item.url!=''">
		<image :src="item.url" mode="widthFix"  @click="previewMedia(item.url)"></image>
	</view>
	</block>
	<!-- 提交生成图片 -->
	<button class="submit-creation" @click="submitCreation">生成图片</button>
</template>

<script setup>
	import {ref} from "vue"
	import {chatCreateImages,inProgress} from "@/store/index.js"
	const store =  chatCreateImages()
	const styleList=ref([
		{
			icon:'/static/fengge/001.png',
			title:'无风格',
			color:'#1F9BE5'
		},
		{
			icon:'/static/fengge/002.jpg',
			title:'动漫风格',
			color:'#4F965E'
		},
		{
			icon:'/static/fengge/003.png',
			title:'写实',
			color:'#93726F'
		},
		{
			icon:'/static/fengge/004.png',
			title:'Q版简绘',
			color:'#1F9BE5'
		},
		{
			icon:'/static/fengge/005.png',
			title:'治愈男生',
			color:'#656565'
		},
		{
			icon:'/static/fengge/006.png',
			title:'治愈女生',
			color:'#D49D7D'
		},
		{
			icon:'/static/fengge/007.png',
			title:'卡通手绘',
			color:'#ff9999'
		},
		{
			icon:'/static/fengge/008.png',
			title:'复古动漫',
			color:'#ffcc66'
		},
		{
			icon:'/static/fengge/009.jpg',
			title:'港风胶片',
			color:'#cc3300'
		},
		
	])
	//  选择了哪个风格
	const selectIndex = ref(0)
	//画面关键词
	const content = ref('')
	// 开始生成图片
	const submitCreation = ()=>{
		if(inProgress().queryValue()) return
		if(content.value.trim() === '') return
		store.seartSending(`${content.value},风格:${styleList.value[selectIndex.value].title}`)
	}
	// 预览保存图片
	const previewMedia = (url)=>{
		uni.previewMedia({
			sources:[{url}]
		})
	}
</script>

<style lang="less" scoped>
	.style-title{
		padding: 20rpx;
	}
	.scroll-viwe_H{
		white-space: nowrap;
		height: 130rpx;
		.style-content{
			height: 130rpx;
			width: 130rpx;
			margin-left: 20rpx;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			.style-list{
				position: relative;
				image{
					width: 110rpx;
					height: 110rpx;
					border-radius: 15rpx;
					position: relative;
				}
				text{
					position: absolute;
					left: 0;
					right: 0;
					bottom: 0;
					font-size: 22rpx;
					border-bottom-left-radius: 15rpx;
					border-bottom-right-radius: 15rpx;
					text-align: center;
					padding: 5rpx 0 ;
					color: #ffffff;
				}
			}
		}
		.style-content:last-child{
			margin-right: 20rpx;
		}
		// 选中加上边框
		.select-style{
			border:4rpx solid #E23256;
			border-radius: 15rpx;
			box-sizing: border-box;
		}
	}
	.keyword-title{
		padding:50rpx 20rpx 20rpx 20rpx ;
	}
	.textarea-view{
		background-color: #ffffff;
		margin: 0 20rpx;
		border-radius: 15rpx;
		padding: 10rpx;
		.textarea-style{
			width: 100%;
			line-height: 1.4;
		}
	}
	// Ai绘图生成效果
	.creative-tips{
		text-align: center;
		padding: 30rpx 20rpx;
		color:darkorange;
		font-weight: bold;
		line-height: 1.5;
	}
	.creative-image{
		margin: 0 20rpx;
		image{
			width: 100%;
			border-radius: 5rpx;
		}
	}
	.submit-creation{
		position: fixed;
		bottom: 68rpx;
		left: 20rpx;
		right: 20rpx;
		padding: 20rpx 0;
		border-radius: 40rpx;
		background: linear-gradient(to right,#A2C5FE,#C0E7FD);
	}
</style>